import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';

// Simple text-based icons
const Icon = ({ name, size = 24, color = '#000' }: { name: string; size?: number; color?: string }) => {
  const iconMap: { [key: string]: string } = {
    'cloud': '☁️',
    'list': '📋',
    'chevron-right': '▶️',
    'bookmark': '🔖',
    'description': '📄',
    'location-on': '📍',
    'bar-chart': '📊',
    'stamp': '🖇️',
    'credit-card': '💳',
    'receipt': '🧾',
    'notifications': '🔔',
    'book': '📚',
    'mail': '📧',
    'person': '👤',
  };

  return (
    <Text style={{ fontSize: size, color }}>
      {iconMap[name] || '📱'}
    </Text>
  );
};

const Shou: React.FC = () => {
  const navigation = useNavigation();
  
  const metrics = [
    { label: '待审批', value: '15' },
    { label: '会议提醒', value: '2' },
    { label: '周报', value: '1' },
    { label: '工作汇报', value: '5' },
  ];

  const applications = [
    {
      icon: 'description',
      name: '流程申请',
      color: '#9C27B0',
    },
    {
      icon: 'location-on',
      name: '考勤打卡',
      color: '#2196F3',
    },
    {
      icon: 'bar-chart',
      name: '汇报',
      color: '#4CAF50',
    },
    {
      icon: 'stamp',
      name: 'OA审批',
      color: '#FF9800',
    },
    {
      icon: 'credit-card',
      name: '补卡申请',
      color: '#009688',
    },
    {
      icon: 'receipt',
      name: '工资单',
      color: '#2196F3',
    },
    {
      icon: 'notifications',
      name: '公司公告',
      color: '#F44336',
    },
    {
      icon: 'description',
      name: '规则制度',
      color: '#2196F3',
    },
  ];

  const myApplications = [
    {
      title: '请假申请',
      dateRange: '2020/11/23 至 2020/11/24 共2天',
      applicationTime: '申请时间: 2020-11-22 16:50',
      status: '待审批',
      statusColor: '#F44336',
    },
    {
      title: '请假申请',
      dateRange: '2020/11/23 至 2020/11/24 共2天',
      applicationTime: '申请时间: 2020-11-22 16:50',
      status: '正在审批中',
      statusColor: '#4CAF50',
    },
  ];



  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="light-content" backgroundColor="#1976D2" />
      
      {/* Header */}
      <View style={styles.header}>
        <View style={styles.headerTop}>
          <Text style={styles.time}>12:00</Text>
          <View style={styles.weatherInfo}>
            <Text style={styles.weatherText}>8°C</Text>
            <Text style={styles.dateText}>12月8日</Text>
            <Icon name="cloud" size={16} color="white" />
          </View>
        </View>
        <Text style={styles.headerTitle}>我的办公</Text>
      </View>

      {/* Metrics */}
      <View style={styles.metricsContainer}>
        {metrics.map((metric, index) => (
          <View key={index} style={styles.metricItem}>
            <Text style={styles.metricValue}>{metric.value}</Text>
            <Text style={styles.metricLabel}>{metric.label}</Text>
          </View>
        ))}
      </View>

      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
        {/* Application Management */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <View style={styles.sectionTitleContainer}>
              <Icon name="list" size={20} color="#333" />
              <Text style={styles.sectionTitle}>应用管理</Text>
            </View>
            <TouchableOpacity style={styles.moreButton}>
              <Text style={styles.moreText}>自定义</Text>
              <Icon name="chevron-right" size={16} color="#666" />
            </TouchableOpacity>
          </View>
          
          <View style={styles.appGrid}>
            {applications.map((app, index) => (
              <TouchableOpacity 
                key={index} 
                style={styles.appItem}
                onPress={() => {
                  if (app.name === '流程申请') {
                    navigation.navigate('AllApplications' as never);
                  }
                }}
              >
                <View style={[styles.appIcon, { backgroundColor: app.color }]}>
                  <Icon name={app.icon} size={24} color="white" />
                </View>
                <Text style={styles.appName}>{app.name}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>

        {/* My Applications */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <View style={styles.sectionTitleContainer}>
              <Icon name="bookmark" size={20} color="#333" />
              <Text style={styles.sectionTitle}>我的申请</Text>
            </View>
            <TouchableOpacity style={styles.moreButton}>
              <Text style={styles.moreText}>更多</Text>
              <Icon name="chevron-right" size={16} color="#666" />
            </TouchableOpacity>
          </View>
          
          {myApplications.map((app, index) => (
            <View key={index} style={styles.applicationItem}>
              <View style={styles.applicationContent}>
                <View style={styles.applicationHeader}>
                  <View style={styles.statusDot} />
                  <Text style={styles.applicationTitle}>{app.title}</Text>
                  <Text style={[styles.applicationStatus, { color: app.statusColor }]}>
                    {app.status}
                  </Text>
                </View>
                <Text style={styles.applicationDate}>{app.dateRange}</Text>
                <Text style={styles.applicationTime}>{app.applicationTime}</Text>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>


    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  header: {
    backgroundColor: '#1976D2',
    paddingHorizontal: 20,
    paddingTop: 10,
    paddingBottom: 20,
  },
  headerTop: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  time: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500',
  },
  weatherInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  weatherText: {
    color: 'white',
    fontSize: 14,
  },
  dateText: {
    color: 'white',
    fontSize: 14,
  },
  headerTitle: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
  metricsContainer: {
    backgroundColor: '#1976D2',
    flexDirection: 'row',
    paddingHorizontal: 20,
    paddingBottom: 20,
  },
  metricItem: {
    flex: 1,
    alignItems: 'center',
  },
  metricValue: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  metricLabel: {
    color: 'white',
    fontSize: 12,
  },
  content: {
    flex: 1,
  },
  section: {
    backgroundColor: 'white',
    marginTop: 10,
    paddingHorizontal: 20,
    paddingVertical: 15,
  },
  sectionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
  },
  sectionTitleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
  },
  moreButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  moreText: {
    fontSize: 14,
    color: '#666',
  },
  appGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  appItem: {
    width: '22%',
    alignItems: 'center',
    marginBottom: 15,
  },
  appIcon: {
    width: 50,
    height: 50,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 8,
  },
  appName: {
    fontSize: 12,
    color: '#333',
    textAlign: 'center',
  },
  applicationItem: {
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
    paddingVertical: 12,
  },
  applicationContent: {
    flex: 1,
  },
  applicationHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  statusDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#2196F3',
    marginRight: 8,
  },
  applicationTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
    flex: 1,
  },
  applicationStatus: {
    fontSize: 14,
    fontWeight: '500',
  },
  applicationDate: {
    fontSize: 14,
    color: '#666',
    marginBottom: 4,
  },
  applicationTime: {
    fontSize: 12,
    color: '#999',
  },

});

export default Shou;
